import { shallowRef, onMounted, onBeforeUnmount } from "vue";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";

/**
 * 使用Echarts创建图表
 *
 * @param instance 实例对象
 * @param dom 图表容器
 * @param option 图表配置
 * @returns {domRef,setOption, clearChart, resizeChart, setResizeListener,initChart,removeClickEvent}
 *
 */
export const useEcharts = (instance,dom, option) => {
    const domRef = shallowRef();
    /**
     * 初始化图表
     *
     * @returns 无返回值
     */
    const initChart = () => {
        if (!dom.value) return console.error("容器未初始化");
        clearChart();
        if(instance === undefined){
            instance = echarts.init(dom.value);
            domRef.value = instance
        }
        // 设置图表大小改变事件监听器
        setResizeListener();
        // 设置图表配置
        instance?.setOption(option,true);
    };

    /**
     * 设置图表选项
     *
     * @param option 选项对象
     * @returns 无返回值
     */
    const setOption = (option) => {
        if (!instance) return console.error("实例未初始化");
        instance.setOption(option);
    };
    const removeClickEvent = () => {
        if (!instance) return console.error("实例未初始化");
        instance.off("click")
    }

    /**
     * 重新调整图表大小
     *
     * @returns 无返回值
     */
    const resizeChart = () => {
        if (!instance) return console.error("实例未初始化");
        instance.resize();
    };


    /**
     * 设置调整大小事件监听器
     *
     * @returns 无返回值
     */
    let isResizeListenerSet = false;
    const setResizeListener = () => {
        if (!isResizeListenerSet) {
            window.addEventListener("resize", resizeChart);
            isResizeListenerSet = true;
        }
    };

    /**
     * 清除图表
     *
     * @description 如果实例存在，则销毁实例并移除窗口大小改变事件监听器
     */
    const clearChart = () => {
        if (instance) {
            instance.clear();
        }
    };
    onBeforeUnmount(() => {
        window.removeEventListener("resize", resizeChart);
        clearChart();
    });
    return {domRef,setOption, clearChart, resizeChart, setResizeListener,initChart,removeClickEvent};
};
